<template>
  <div class="addus">
    <div class="swiper_box">
      <swiper
        class="swiper-no-swiping"
        :options="swiperOption"
        ref="mySwiper"
        @slideChange="slideChange()"
      >
        <swiper-slide class="swiper-slide-defalut">
          <div class="homeBanner">
            <!-- <div id="bannerImg"></div>
            <div id="overlay"></div> -->
            <NavBarHeader class="navBarHeader"></NavBarHeader>
            <div class="swiper_boxn">
              <div class="aubanner1title">
                <img
                  class="img"
                  src="https://file.honglonglong.com.cn/hll_newPc/Home/aubannerIcon.png"
                  alt=""
                />
                <div class="text">
                  东北区域总部、华北区域总部、西北区域总部、西南区域总部、华南区域总部、华中区域总部、华东区域总部、华北区域总部、东北区域总部
                </div>
              </div>
              <div class="map">
                <div
                  class="animated fadeIn"
                  style="animation-duration: 1s; animation-delay: 1s !important"
                >
                  <div class="mark">
                    <div class="textFlex">华北总部</div>
                    <lottie
                      :height="128"
                      :width="128"
                      :options="defaultOptions1"
                      @animCreated="handleAnimation"
                    />
                  </div>
                  <div class="mark1">
                    <div class="textFlex">东北总部</div>
                    <lottie
                      :height="128"
                      :width="128"
                      :options="defaultOptions1"
                      @animCreated="handleAnimation"
                    />
                  </div>
                  <div class="mark3">
                    <div class="textFlex">华南总部</div>
                    <lottie
                      :height="128"
                      :width="128"
                      :options="defaultOptions1"
                      @animCreated="handleAnimation"
                    />
                  </div>
                  <div class="mark4">
                    <div class="textFlex">西北总部</div>
                    <lottie
                      :height="128"
                      :width="128"
                      :options="defaultOptions1"
                      @animCreated="handleAnimation"
                    />
                  </div>
                  <div class="mark5">
                    <div class="textFlex">华中总部</div>
                    <lottie
                      :height="128"
                      :width="128"
                      :options="defaultOptions1"
                      @animCreated="handleAnimation"
                    />
                  </div>
                  <div class="mark7">
                    <div class="textFlex">华东总部</div>
                    <lottie
                      :height="128"
                      :width="128"
                      :options="defaultOptions1"
                      @animCreated="handleAnimation"
                    />
                  </div>
                  <div class="mark8">
                    <div class="textFlex">西南总部</div>
                    <lottie
                      :height="128"
                      :width="128"
                      :options="defaultOptions1"
                      @animCreated="handleAnimation"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div @click="nowNext">
              <lottie
                :height="49"
                :width="49"
                class="iconImg"
                :options="defaultOptions"
                @animCreated="handleAnimation"
              />
            </div>
          </div>
        </swiper-slide>
        <swiper-slide class="swiper-slide-defalut">
          <div class="homeBanner2">
            <div class="swiper_boxn">
              <div class="aubanner2title">
                <img
                  :class="{ img: true, animated: true, fadeInUp: auShow2 }"
                  style="animation-duration: 1s; animation-delay: 1s !important"
                  src="https://file.honglonglong.com.cn/hll_newPc/Home/aubanner22.png"
                  alt=""
                />
                <div class="au2text">
                  <div
                    style="
                      animation-duration: 1.2s;
                      animation-delay: 1.2s !important;
                    "
                    :class="{ title: true, animated: true, fadeInUp: auShow2 }"
                  >
                    我们的目的· 自由创业+丰富人生
                  </div>
                  <div
                    style="
                      animation-duration: 1.3s;
                      animation-delay: 1.3s !important;
                    "
                    :class="{ animated: true, fadeInUp: auShow2 }"
                  >
                    轰隆隆开放平台资源、开放产品、开放服务，共享给广大轰隆隆创业团队，
                    让大家拥有自己的事业
                  </div>
                  <div
                    style="
                      animation-duration: 1.4s;
                      animation-delay: 1.4s !important;
                    "
                    :class="{ animated: true, fadeInUp: auShow2 }"
                  >
                    免费享用轰隆隆独特的工程互联网生态体系，利用自身才华及努力拼搏，实现财富自由、丰富人生！
                  </div>
                  <div
                    style="
                      animation-duration: 1.5s;
                      animation-delay: 1.5s !important;
                    "
                    :class="{ addBtn: true, animated: true, fadeInUp: auShow2 }"
                  >
                    <div class="addBtn" @click="addHll">立即加入</div>
                  </div>
                </div>
              </div>
              <div class="aubanner2right">
                <div
                  :class="{
                    aubanner2bg: true,
                    animated: true,
                    fadeInRight: auShow2,
                  }"
                  style="
                    animation-duration: 1.1s;
                    animation-delay: 1.1s !important;
                  "
                >
                  <div
                    style="
                      animation-duration: 1.3s;
                      animation-delay: 1.3s !important;
                    "
                    :class="{
                      aulist: true,
                      animated: true,
                      fadeInUp: auShow2,
                    }"
                  >
                    <div class="title">授权主体</div>
                    <div class="text">
                      轰隆隆部落是经轰隆隆总部授权、在指定的区域或经营范围内成立的高度自治的创业伙伴。
                    </div>
                  </div>
                  <div
                    style="
                      animation-duration: 1.4s;
                      animation-delay: 1.4s !important;
                    "
                    :class="{
                      aulist: true,
                      animated: true,
                      fadeInUp: auShow2,
                    }"
                  >
                    <div class="title">免费服务</div>
                    <div class="text">
                      各轰隆隆的创业伙伴，可免费享用轰隆隆的平台、产品和服务等资源，自由组建团队、开拓业务、发展事业。
                    </div>
                  </div>
                  <div
                    style="
                      animation-duration: 1.5s;
                      animation-delay: 1.5s !important;
                    "
                    :class="{
                      aulist: true,
                      animated: true,
                      fadeInUp: auShow2,
                    }"
                  >
                    <div class="title">自主经营</div>
                    <div class="text">
                      在遵守轰隆隆总部的市场政策前提下，各轰隆隆创业伙伴享有自主创业经营权。
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div @click="nowNext">
              <lottie
                :height="49"
                :width="49"
                class="iconImg"
                :options="defaultOptions"
                @animCreated="handleAnimation"
              />
            </div>
          </div>
        </swiper-slide>
        <swiper-slide class="swiper-slide-defalut">
          <div class="homeBanner3">
            <div class="swiper_boxn">
              <div class="aubanner3title">
                <img
                  :class="{ img: true, animated: true, fadeInUp: auShow3 }"
                  style="animation-duration: 1s; animation-delay: 1s !important"
                  src="https://file.honglonglong.com.cn/hll_newPc/Home/aubanner32.png"
                  alt=""
                />
              </div>
              <div class="centerCom">
                <div class="center1con">
                  <div
                    style="
                      animation-duration: 1s;
                      animation-delay: 1s !important;
                    "
                    id="center"
                    :class="{
                      center1: true,
                      animated: true,
                      fadeInUp: auShow3,
                    }"
                  >
                    <div class="number">01</div>
                    <div class="text">
                      适合对象：工程承包商或相关从业者、工程机械租赁企业
                    </div>
                  </div>
                </div>
                <div class="center2con">
                  <div
                    style="
                      animation-duration: 1s;
                      animation-delay: 1s !important;
                    "
                    :class="{
                      center2: true,
                      animated: true,
                      fadeInUp: auShow3,
                    }"
                  >
                    <div class="number">02</div>
                    <div class="text">
                      能够接受轰隆隆平台的合作规定，签署合作文件，合法依规经营；
                    </div>
                  </div>
                </div>
                <div class="center3con">
                  <div
                    style="
                      animation-duration: 1s;
                      animation-delay: 1s !important;
                    "
                    :class="{
                      center3: true,
                      animated: true,
                      fadeInUp: auShow3,
                    }"
                  >
                    <div class="number">03</div>
                    <div class="text">
                      熟悉工程基建行业，在所属合作区域有广泛的企业和人脉资源；
                    </div>
                  </div>
                </div>
                <div class="center4con">
                  <div
                    style="
                      animation-duration: 1s;
                      animation-delay: 1s !important;
                    "
                    :class="{
                      center4: true,
                      animated: true,
                      fadeInUp: auShow3,
                    }"
                  >
                    <div class="number">04</div>
                    <div class="text">
                      在合作区域能够最大限度的整合工程机械资源、拓展租赁业务；
                    </div>
                  </div>
                </div>
                <div class="center5con">
                  <div
                    style="
                      animation-duration: 1s;
                      animation-delay: 1s !important;
                    "
                    :class="{
                      center5: true,
                      animated: true,
                      fadeInUp: auShow3,
                    }"
                  >
                    <div class="number">05</div>
                    <div class="text">
                      致力于推动工程互联网发展，对推动工程机械产业变革和数字化赋能充满信心！
                    </div>
                  </div>
                </div>
              </div>
            </div>
             <div @click="nowNext">
              <lottie
                :height="49"
                :width="49"
                class="iconImg"
                :options="defaultOptions"
                @animCreated="handleAnimation"
              />
            </div>
          </div>
        </swiper-slide>
        <swiper-slide class="swiper-slide-defalut" id="ahome">
          <div class="homeBanner4">
            <div class="swiper_boxn">
              <div class="aubanner4title">
                <img
                  :class="{ img: true, animated: true, fadeInUp: auShow4 }"
                  style="animation-duration: 1s; animation-delay: 1s !important"
                  src="https://file.honglonglong.com.cn/hll_newPc/Home/aubanner4.png"
                  alt=""
                />
              </div>
              <div class="submit">
                <div
                  style="
                  animation-duration: 1.2s;
                  animation-delay: 1.2s !important;q
                "
                  :class="{ con1: true, animated: true, fadeInUp: auShow4 }"
                >
                  <div class="left">
                    <div class="title">
                      <span class="redStart">*</span>
                      您的姓名:
                    </div>
                    <el-input
                      placeholder="请输入您的姓名"
                      class="inputStyle"
                      v-model="userName"
                    ></el-input>
                  </div>
                  <div class="right">
                    <div class="title">
                      <span class="redStart">*</span>
                      联系电话:
                    </div>
                    <el-input
                      placeholder="请输入您的联系电话"
                      class="inputStyle"
                      v-model="userPhone"
                      maxlength="15"
                    ></el-input>
                  </div>
                </div>
                <div
                  style="
                    animation-duration: 1.3s;
                    animation-delay: 1.3s !important;
                  "
                  :class="{ con2: true, animated: true, fadeInUp: auShow4 }"
                >
                  <div class="left">
                    <div class="title">
                      <span class="redStart">*</span>
                      验证码:
                    </div>
                    <div class="setCenter">
                      <el-input
                        v-model="userNumber"
                        autocomplete="off"
                        maxlength="4"
                        placeholder="请输入验证码"
                        class="inputStyle"
                      ></el-input>
                      <div class="login-code" @click="refreshCode">
                        <!--验证码组件-->
                        <Sidentify :identifyCode="identifyCode"></Sidentify>
                      </div>
                    </div>
                  </div>
                  <div class="right">
                    <div class="title">
                      <span class="redStart">*</span>
                      公司名称:
                    </div>
                    <el-input
                      placeholder="请输入公司名称"
                      class="inputStyle"
                      v-model="userComp"
                    ></el-input>
                  </div>
                </div>
                <div
                  style="
                    animation-duration: 1.4s;
                    animation-delay: 1.4s !important;
                  "
                  :class="{ con2: true, animated: true, fadeInUp: auShow4 }"
                >
                  <div class="left">
                    <div class="title">
                      <span class="redStart"></span>公司网址:
                    </div>
                    <el-input
                      placeholder="请输入公司网址"
                      class="inputStyle"
                      v-model="userAddress"
                    ></el-input>
                  </div>
                  <div class="right">
                    <div class="title">常用邮箱:</div>
                    <el-input
                      placeholder="请输入常用邮箱"
                      class="inputStyle"
                      v-model="userEmail"
                    ></el-input>
                  </div>
                </div>
                <div
                  style="
                    animation-duration: 1.5s;
                    animation-delay: 1.5s !important;
                  "
                  :class="{ con3: true, animated: true, fadeInUp: auShow4 }"
                >
                  <div class="title">业务说明:</div>
                  <el-input
                    type="textarea"
                    placeholder="请简要描述下您的业务"
                    class="inputStyle3"
                    :rows="4"
                    v-model="userCom"
                  ></el-input>
                </div>
              </div>
              <div
                style="
                  animation-duration: 1.6s;
                  animation-delay: 1.6s !important;
                "
                :class="{ sbmBtn: true, animated: true, fadeInUp: auShow4 }"
                @click="subMit"
              >
                <div>提交</div>
                <img
                  class="rightarrow"
                  src="./../../../assets/img/navbar/rightLine.svg"
                  alt=""
                />
                <img
                  class="rightarrow2"
                  src="./../../../assets/img/navbar/rightLine2.svg"
                  alt=""
                />
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <FooterBar class="footerBar" v-show="show"></FooterBar>
    </div>
  </div>
</template>

<script>
const animationData = require("@/assets/js/data.json");
const animationData1 = require("@/assets/js/data4.json");
import NavBarHeader from "../../../components/NavBarHeader";
import FooterBar from "../../../components/FooterBar";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import Sidentify from "./../../../components/Sidentify";
import { setSavebusincooperat } from "./../../../apis/api.js";
export default {
  name: "contactUs",
  data() {
    return {
      userInfo: {},
      identifyCodes: "1234567890",
      identifyCode: "",
      swiperOption: {
        // pagination:'.swiper-pagination',
        notNextTick: true, // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        direction: "vertical", // 水平方向移动
        grabCursor: false, // 鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
        setWrapperSize: true, // Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
        autoHeight: true, // 自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        slidesPerView: 1, // 设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
        observer: true,
        initialSlide: 0,
        mousewheel: true, // 开启鼠标滚轮控制Swiper切换。可设置鼠标选项，默认值false
        height: window.innerHeight, // 高度设置，占满设备高度
        // autoHeight: true, // 高度随内容变化
        resistanceRatio: 0, // 抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。本业务需要
        observeParents: true, // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
        // autoplayDisableOnInteraction: false, //鼠标划过之后继续轮播
        speed: 1000, // 滚动速度
      },
      defaultOptions: { animationData: animationData, loop: true },
      defaultOptions1: { animationData: animationData1, loop: true },
      show: false,
      auShow2: false,
      auShow3: false,
      auShow4: false,
      userName: "",
      userPhone: "",
      userNumber: "",
      userComp: "",
      userAddress: "",
      userEmail: "",
      userCom: "",
    };
  },
  watch: {},
  components: {
    NavBarHeader,
    Swiper,
    SwiperSlide,
    FooterBar,
    Sidentify,
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },

  mounted() {
    this.scrollFunction();
    console.log("Current Swiper instance object", this.swiper);
    window.addEventListener("scroll", this.handleScroll, true);
    this.$refs.mySwiper.$swiper.mousewheel.enable();
  },
  methods: {
    handleAnimation: function (animate) {
      this.animObj = animate;
      console.log(animate); //这里可以看到 lottie 对象的全部属性
    },
    nowNext() {
      this.$refs.mySwiper.$swiper.slideNext();
    },

    // 鼠标滑轮滚动
    scrollFunction() {
      this.domObj = document.getElementById("ahome"); // 通过id获取要设置的div
      if (this.domObj.attachEvent) {
        // IE
        this.domObj.attachEvent("onmousewheel", this.mouseScroll);
      } else if (this.domObj.addEventListener) {
        this.domObj.addEventListener("DOMMouseScroll", this.mouseScroll, false);
      }
      this.domObj.onmousewheel = this.domObj.onmousewheel = this.mouseScroll;
    },
    mouseScroll(event) {
      // google 浏览器下
      let detail = event.wheelDelta || event.detail; // 判读滚动方向
      console.log(detail);
      console.log(this.i); // 是否离开底部
      // if (detail < -100) {
      //     this.show = true;
      //     // this.$router.afterEach((to, from, next) => {
      //     //   window.scrollTo(0, 0);
      //     // });
      //     this.$refs.mySwiper.$swiper.mousewheel.disable();
      // }
      if (detail > 0) {
        // this.auShow4 = false;
        // this.show = false;
        // this.$router.afterEach((to, from, next) => {
        //   window.scrollTo(0, 0);
        // });
        setTimeout(() => {
          this.$refs.mySwiper.$swiper.mousewheel.enable();
        }, 100);
        // this.$refs.mySwiper.$swiper.mousewheel.disable();
      }
    },
    slideChange(e) {
      const activeIndex = this.$refs.mySwiper.$swiper.activeIndex;
      if (activeIndex === 1) {
        this.auShow2 = true;
        this.show = false;
      } else if (activeIndex === 2) {
        this.auShow3 = true;
        this.show = false;
      } else if (activeIndex === 3) {
        this.auShow4 = true;
        this.show = true;
        this.scrollFunction();
        setTimeout(() => {
          this.$refs.mySwiper.$swiper.mousewheel.disable();
        }, 100);
      } else {
        this.show = false;
      }
    },

    handleScroll() {
      // 页面滚动距顶部距离
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      var scroll = scrollTop - this.i;
      this.i = scrollTop;
      if (scroll < 0) {
        if (scrollTop < 10) {
          this.$refs.mySwiper.$swiper.mousewheel.enable();
        }
      } else {
        console.log("down");
      }
    },
    // 加入轰隆隆
    addHll() {
      this.$refs.mySwiper.$swiper.slideTo(3, 1000, false); //切换到第一个slide，速度为1秒
    },
    //提交
    async subMit() {
      if (!this.userInfo) {
        this.$router.push({ path: "/loginPc" });
        return;
      }
      if (this.userName == "") {
        this.$message.warning("请输入您姓名！");
        return;
      }
      if (this.userPhone == "") {
        this.$message.warning("请输入您联系电话！");
        return;
      }
      if (!/^1[34578]\d{9}$/.test(this.userPhone)) {
        this.$message.error("请输入手机号码或号码格式不正确！");
        return;
      }
      if (this.userNumber == "") {
        this.$message.warning("请输入验证码！");
        return;
      }
      if (this.identifyCode !== this.userNumber) {
        this.userNumber = "";
        this.refreshCode();
        this.$message.error("请输入正确的验证码！");
        return;
      }
      if (this.userComp == "") {
        this.$message.warning("请输入您的公司名称！");
        return;
      }
      let data = {
        phone: this.userPhone,
        user_name: this.userName,
        email: this.userEmail,
        company_name: this.userComp,
        company_url: this.userAddress,
        info: this.userCom,
      };
      let res = await setSavebusincooperat(data);
      if (res.data.result == "1") {
        this.$message.success("提交成功！");
        (this.userPhone = ""),
          (this.userName = ""),
          (this.userEmail = ""),
          (this.userComp = ""),
          (this.userAddress = ""),
          (this.userCom = "");
      } else {
        this.$message.success("提交失败！");
      }
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
      console.log(this.identifyCode);
    },
  },
  created() {
    this.userInfo = window.localStorage.getItem("userInfo");
    //初始化验证码
    this.refreshCode();
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
};
</script>
<style lang="scss" scoped>
.swiper-slide-defalut {
  height: 100vh;
  overflow: hidden;
}
@-moz-keyframes bannerItem {
  0% {
    -moz-transform: translate3d(0, 1em, 0);
    -webkit-transform: translate3d(0, 1em, 0);
    -ms-transform: translate3d(0, 1em, 0);
    transform: translate3d(0, 1em, 0);
    opacity: 0;
  }

  100% {
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes bannerItem {
  0% {
    -moz-transform: translate3d(0, 1em, 0);
    -webkit-transform: translate3d(0, 1em, 0);
    -ms-transform: translate3d(0, 1em, 0);
    transform: translate3d(0, 1em, 0);
    opacity: 0;
  }

  100% {
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-ms-keyframes bannerItem {
  0% {
    -moz-transform: translate3d(0, 1em, 0);
    -webkit-transform: translate3d(0, 1em, 0);
    -ms-transform: translate3d(0, 1em, 0);
    transform: translate3d(0, 1em, 0);
    opacity: 0;
  }

  100% {
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes bannerItem {
  0% {
    -moz-transform: translate3d(0, 1em, 0);
    -webkit-transform: translate3d(0, 1em, 0);
    -ms-transform: translate3d(0, 1em, 0);
    transform: translate3d(0, 1em, 0);
    opacity: 0;
  }

  100% {
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-moz-keyframes bannerBox {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes bannerBox {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-ms-keyframes bannerBox {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes bannerBox {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
#bannerBox {
  -moz-animation: bannerBox 3s forwards;
  -webkit-animation: bannerBox 3s forwards;
  -ms-animation: bannerBox 3s forwards;
  animation: bannerBox 3s forwards;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100%;
  object-fit: cover;
}
#bannerImg {
  // -moz-animation: bannerImg 60s linear infinite;
  // -webkit-animation: bannerImg 60s linear infinite;
  // -ms-animation: bannerImg 60s linear infinite;
  // animation: bannerImg 60s linear infinite;
  // -moz-backface-visibility: hidden;
  // -webkit-backface-visibility: hidden;
  // -ms-backface-visibility: hidden;
  // backface-visibility: hidden;
  // -moz-transform: translate3d(0, 0, 0);
  // -webkit-transform: translate3d(0, 0, 0);
  // -ms-transform: translate3d(0, 0, 0);
  // transform: translate3d(0, 0, 0);
  // /* Set your background with this */

  // background: url("https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/engineering/bgImg.png")
  //   no-repeat;
  //       background-size: 100%,100%;
  // background-repeat: repeat-x;
  height: 100%;
  left: 0;
  opacity: 1;
  position: fixed;
  top: 0;
  object-fit: cover;
}
@-moz-keyframes bannerImg {
  0% {
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    -moz-transform: translate3d(-2250px, 0, 0);
    -webkit-transform: translate3d(-2250px, 0, 0);
    -ms-transform: translate3d(-2250px, 0, 0);
    transform: translate3d(-2250px, 0, 0);
  }
}

@-webkit-keyframes bannerImg {
  0% {
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    -moz-transform: translate3d(-2250px, 0, 0);
    -webkit-transform: translate3d(-2250px, 0, 0);
    -ms-transform: translate3d(-2250px, 0, 0);
    transform: translate3d(-2250px, 0, 0);
  }
}

@-ms-keyframes bannerImg {
  0% {
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    -moz-transform: translate3d(-2250px, 0, 0);
    -webkit-transform: translate3d(-2250px, 0, 0);
    -ms-transform: translate3d(-2250px, 0, 0);
    transform: translate3d(-2250px, 0, 0);
  }
}

@keyframes bannerImg {
  0% {
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    -moz-transform: translate3d(-2250px, 0, 0);
    -webkit-transform: translate3d(-2250px, 0, 0);
    -ms-transform: translate3d(-2250px, 0, 0);
    transform: translate3d(-2250px, 0, 0);
  }
}
#bannerImg {
  background-size: 2250px auto;
  width: 6750px;
}
@-moz-keyframes overlay {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.4;
  }
}

@-webkit-keyframes overlay {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.4;
  }
}

@-ms-keyframes overlay {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.4;
  }
}

@keyframes overlay {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.4;
  }
}
.iconImg {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 49px;
  height: 49px;
  z-index: 10;
  cursor: pointer;
}
.addus {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
  background: rgba(255, 255, 255, 0.3);
  .navBarHeader {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }
  .homeBanner {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: url("https://file.honglonglong.com.cn/hll_newPc/Home/aumapbg.png");
    // background: url("https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/engineering/bgImg.png");
    background-size: cover;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    @keyframes wxBlinking {
      0% {
        opacity: 0;
      }
      25% {
        opacity: 50;
      }
      50% {
        opacity: 100;
      }
      75% {
        opacity: 50;
      }
      100% {
        opacity: 0;
      }
    }
    @-webkit-keyframes scaleout {
      0% {
        -webkit-transform: scale(0.9);
      }
      50% {
        -webkit-transform: scale(1);
      }
      100% {
        -webkit-transform: scale(1.1);
        // opacity: 1;
      }
      50% {
        transform: scale(1);
        -webkit-transform: scale(1);
      }
      0% {
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
      }
    }
    @keyframes scaleout {
      0% {
        transform: scale(0.1);
        -webkit-transform: scale(0.1);
      }

      50% {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
      }

      100% {
        transform: scale(0.1);
        -webkit-transform: scale(0.1);
      }
    }

    @keyframes warn {
      100% {
        transform: scale(1);
        -webkit-transform: scale(0.3);
        opacity: 1;
      }

      75% {
        transform: scale(1);
        -webkit-transform: scale(0.3);
        opacity: 0.8;
      }

      50% {
        transform: scale(1);
        -webkit-transform: scale(0.5);
        opacity: 0.6;
      }

      25% {
        transform: scale(1);
        -webkit-transform: scale(0.8);
        opacity: 0.4;
      }

      0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0.2;
      }
      25% {
        transform: scale(1);
        -webkit-transform: scale(0.8);
        opacity: 0.4;
      }

      50% {
        transform: scale(1);
        -webkit-transform: scale(0.5);
        opacity: 0.6;
      }
      75% {
        transform: scale(1);
        -webkit-transform: scale(0.3);
        opacity: 0.8;
      }
      100% {
        transform: scale(1);
        -webkit-transform: scale(0.3);
        opacity: 1;
      }
    }
    .swiper_boxn {
      position: relative;
      min-width: 1300px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .aubanner1title {
      z-index: 10;
      position: absolute;
      top: 50%;
      left: 0;
      // transform: translate(0, -50%);
      -moz-animation: bannerItem 1s 1.25s forwards;
      -webkit-animation: bannerItem 1s 21.25s forwards;
      -ms-animation: bannerItem 1s 1.25s forwards;
      animation: bannerItem 1s 1.25s forwards;
      -moz-backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 0;
      .img {
        width: 346px;
        height: 68px;
      }
      .text {
        width: 356px;
        height: 60px;
        font-size: 14px;
        font-weight: 400;
        color: #909399;
        margin: 24px 0 0 10px;
        word-spacing: 2px;
      }
    }
    .map {
      margin: 0 auto;
      margin-top: 25%;
      position: relative;
      width: 1300px;
      height: 75%;
      background: url(https://file.honglonglong.com.cn/hll_newPc/Home/mapBg.png)
        no-repeat;
      background-size: cover;
      font-size: 14px;
      color: #ffffff;
      .mark {
        position: absolute;
        top: 81px;
        right: 297px;
        width: 160px;
        height: 160px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
         .textFlex {
          position: absolute;
          top: 25%;
          right: 35%;
        }
      }
      .mark1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 160px;
        height: 160px;
        position: absolute;
        top: 124px;
        right: 199px;
         .textFlex {
          position: absolute;
          top: 25%;
          right: 35%;
        }
      }
     
      .mark3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 160px;
        height: 160px;
        position: absolute;
        bottom: 150px;
        right: 270px;
         .textFlex {
          position: absolute;
          top: 25%;
          right: 35%;
        }
      }
      .mark4 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 160px;
        height: 160px;
        position: absolute;
        top: 154px;
        right: 420px;
         .textFlex {
          position: absolute;
          top: 25%;
          right: 35%;
        }
      }
      .mark5 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 160px;
        height: 160px;
        // -webkit-animation: scaleout 7.5s infinite ease-in-out;
        // animation: scaleout 7.5s infinite ease-in-out;
        position: absolute;
        top: 220px;
        right: 290px;
         .textFlex {
          position: absolute;
          top: 25%;
          right: 35%;
        }
      }
      
      .mark7 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 160px;
        height: 160px;
        // -webkit-animation: scaleout 8s infinite ease-in-out;
        // animation: scaleout 8s infinite ease-in-out;
        position: absolute;
        bottom: 300px;
        right: 180px;
        .textFlex {
          position: absolute;
          top: 25%;
          right: 35%;
        }
      }
      .mark8 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 160px;
        height: 160px;
        position: absolute;
        bottom: 220px;
        right: 420px;
         .textFlex {
          position: absolute;
          top: 25%;
          right: 35%;
        }
      }
    }
  }
  .homeBanner2 {
    position: relative;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    background: url(https://file.honglonglong.com.cn/hll_newPc/Home/aubanner2bg.png)
      no-repeat;
    background-size: 100% 100%;
    .swiper_boxn {
      width: 1300px;
      height: 100%;
      margin: 0 auto;
      display: flex;
    }
    .aubanner2title {
      margin-top: 10%;
      .img {
        width: 310px;
        height: 70px;
      }
      .au2text {
        // position: absolute;
        // top: 50%;
        // left: 120px;
        // transform: translate(0, -50%);
        margin-top: 35%;
        color: #ffffff;
        .title {
          font-size: 20px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
        }
        div {
          width: 496px;
          line-height: 25px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          margin-bottom: 20px;
          white-space: 5px;
        }
        .addBtn {
          cursor: pointer;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          width: 232px;
          height: 52px;
          line-height: 52px;
          background: linear-gradient(90deg, #ffb492 0%, #fe7d59 100%);
          border-radius: 4px;
          margin-top: 58px;
          transition: all 0.5s;
        }
        .addBtn:hover {
          transition: 0.5s all ease-in;
          transform: scale(1.03); /*以y轴为中心旋转*/
          cursor: pointer;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          width: 232px;
          height: 52px;
          line-height: 52px;
          background: linear-gradient(90deg, #ffb492 0%, #fe7d59 100%);
          border-radius: 4px;
          margin-top: 58px;
        }
      }
    }
    .aubanner2right {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(0, -50%);

      .aubanner2bg {
        width: 720px;
        height: 604px;
        background: #ffffff;
        border-radius: 30px 0px 0px 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .aulist {
          margin-bottom: 30px;
          width: 513px;
          // height: 48px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #909399;
          .title {
            cursor: pointer;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
            width: 110px;
            height: 40px;
            line-height: 40px;
            background: linear-gradient(90deg, #ffb492 0%, #fe7d59 100%);
            box-shadow: 0px 2px 12px 0px #ffb8a4;
            border-radius: 4px;
            transition: all 0.5s;
          }
          .title:hover {
            cursor: pointer;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
            width: 110px;
            height: 40px;
            line-height: 40px;
            background: linear-gradient(90deg, #ffb492 0%, #fe7d59 100%);
            box-shadow: 0px 2px 12px 0px #ffb8a4;
            border-radius: 4px;
            transition: 0.5s all ease-in;
            transform: scale(1.03); /*以y轴为中心旋转*/
          }
          .text {
            margin-top: 30px;
            line-height: 24px;
          }
        }
      }
    }
  }
  .homeBanner3 {
    position: relative;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    background: #202734;
    .swiper_boxn {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
    }
    .aubanner3title {
      .img {
        margin-top: 10%;
        width: 359px;
        height: 70px;
      }
    }
    .centerCom {
      width: 1200px;
      height: 90%;
      line-height: 90%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .center1con {
        width: 210px;
        height: 480px;
        position: relative;
        .center1 {
          position: absolute;
          top: 0;
          transition: all 0.5s;
          cursor: pointer;
          width: 210px;
          height: 380px;
          background: linear-gradient(180deg, #3f4458 0%, #202734 100%);
          .number {
            font-size: 50px;
            font-family: BebasNeue;
            color: rgba(255, 255, 255, 0.1);
            line-height: 60px;
            margin-left: 25px;
            padding-top: 40px;
          }
          .text {
            margin: 30px 25px 0 25px;
            width: 160px;
            height: 72px;
            font-size: 14px;
            line-height: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 200;
            color: #ffffff;
          }
        }
      }
      .center1con:hover {
        width: 210px;
        height: 480px;
        position: relative;
        .center1 {
          position: absolute;
          top: 100px;
          transition: all 1s;
          cursor: pointer;
          width: 210px;
          height: 380px;
          background: linear-gradient(180deg, #ff855a 0%, #202734 100%);
          .number {
            font-size: 50px;
            font-family: BebasNeue;
            color: rgba(255, 255, 255, 0.1);
            line-height: 60px;
            margin-left: 25px;
            padding-top: 40px;
          }
          .text {
            margin: 30px 25px 0 25px;
            width: 160px;
            height: 72px;
            font-size: 14px;
            line-height: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 200;
            color: #ffffff;
          }
        }
      }
      .center2con {
        width: 210px;
        height: 480px;
        position: relative;
        margin: 0 32px;
        .center2 {
          cursor: pointer;
          transition: all 0.5s;
          width: 210px;
          height: 380px;
          position: absolute;
          top: 100px;
          // margin: 0 62px;
          background: linear-gradient(180deg, #3f4458 0%, #202734 100%);
          .number {
            font-size: 50px;
            font-family: BebasNeue;
            color: rgba(255, 255, 255, 0.1);
            line-height: 60px;
            margin-left: 25px;
            padding-top: 40px;
          }
          .text {
            margin: 30px 25px 0 25px;
            width: 160px;
            height: 72px;
            font-size: 14px;
            line-height: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 200;
            color: #ffffff;
          }
        }
      }
      .center2con:hover {
        width: 210px;
        height: 480px;
        margin: 0 32px;
        position: relative;
        .center2 {
          position: absolute;
          top: 0;
          transition: all 1s;
          cursor: pointer;
          width: 210px;
          height: 380px;
          background: linear-gradient(180deg, #ff855a 0%, #202734 100%);
          .number {
            font-size: 50px;
            font-family: BebasNeue;
            color: rgba(255, 255, 255, 0.1);
            line-height: 60px;
            margin-left: 25px;
            padding-top: 40px;
          }
          .text {
            margin: 30px 25px 0 25px;
            width: 160px;
            height: 72px;
            font-size: 14px;
            line-height: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 200;
            color: #ffffff;
          }
        }
      }
      .center3con {
        width: 210px;
        height: 480px;
        position: relative;
        .center3 {
          position: absolute;
          top: 0;
          transition: all 0.5s;
          cursor: pointer;
          width: 210px;
          height: 380px;
          background: linear-gradient(180deg, #3f4458 0%, #202734 100%);
          .number {
            font-size: 50px;
            font-family: BebasNeue;
            color: rgba(255, 255, 255, 0.1);
            line-height: 60px;
            margin-left: 25px;
            padding-top: 40px;
          }
          .text {
            margin: 30px 25px 0 25px;
            width: 160px;
            height: 72px;
            font-size: 14px;
            line-height: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 200;
            color: #ffffff;
          }
        }
      }
      .center3con:hover {
        width: 210px;
        height: 480px;
        position: relative;
        .center3 {
          position: absolute;
          top: 100px;
          transition: all 1s;
          cursor: pointer;
          width: 210px;
          height: 380px;
          background: linear-gradient(180deg, #ff855a 0%, #202734 100%);
          .number {
            font-size: 50px;
            font-family: BebasNeue;
            color: rgba(255, 255, 255, 0.1);
            line-height: 60px;
            margin-left: 25px;
            padding-top: 40px;
          }
          .text {
            margin: 30px 25px 0 25px;
            width: 160px;
            height: 72px;
            font-size: 14px;
            line-height: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 200;
            color: #ffffff;
          }
        }
      }
      .center4con {
        width: 210px;
        height: 480px;
        position: relative;
        margin: 0 32px;
        .center4 {
          position: absolute;
          top: 50px;
          transition: all 0.5s;
          cursor: pointer;
          width: 210px;
          height: 380px;
          background: linear-gradient(180deg, #3f4458 0%, #202734 100%);
          .number {
            font-size: 50px;
            font-family: BebasNeue;
            color: rgba(255, 255, 255, 0.1);
            line-height: 60px;
            margin-left: 25px;
            padding-top: 40px;
          }
          .text {
            margin: 30px 25px 0 25px;
            width: 160px;
            height: 72px;
            font-size: 14px;
            line-height: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 200;
            color: #ffffff;
          }
        }
      }
      .center4con:hover {
        width: 210px;
        height: 480px;
        position: relative;
        margin: 0 32px;
        .center4 {
          position: absolute;
          top: 0;
          transition: all 1s;
          cursor: pointer;
          width: 210px;
          height: 380px;
          background: linear-gradient(180deg, #ff855a 0%, #202734 100%);
          .number {
            font-size: 50px;
            font-family: BebasNeue;
            color: rgba(255, 255, 255, 0.1);
            line-height: 60px;
            margin-left: 25px;
            padding-top: 40px;
          }
          .text {
            margin: 30px 25px 0 25px;
            width: 160px;
            height: 72px;
            font-size: 14px;
            line-height: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 200;
            color: #ffffff;
          }
        }
      }
      .center5con {
        width: 210px;
        height: 480px;
        position: relative;
        .center5 {
          position: absolute;
          top: 0;
          transition: all 0.5s;
          cursor: pointer;
          width: 210px;
          height: 380px;
          background: linear-gradient(180deg, #3f4458 0%, #202734 100%);
          .number {
            font-size: 50px;
            font-family: BebasNeue;
            color: rgba(255, 255, 255, 0.1);
            line-height: 60px;
            margin-left: 25px;
            padding-top: 40px;
          }
          .text {
            margin: 30px 25px 0 25px;
            width: 160px;
            height: 72px;
            font-size: 14px;
            line-height: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 200;
            color: #ffffff;
          }
        }
      }
      .center5con:hover {
        width: 210px;
        height: 480px;
        position: relative;
        .center5 {
          position: absolute;
          top: 50px;
          transition: all 1s;
          margin-top: 100px;
          cursor: pointer;
          width: 210px;
          height: 380px;
          background: linear-gradient(180deg, #ff855a 0%, #202734 100%);
          .number {
            font-size: 50px;
            font-family: BebasNeue;
            color: rgba(255, 255, 255, 0.1);
            line-height: 60px;
            margin-left: 25px;
            padding-top: 40px;
          }
          .text {
            margin: 30px 25px 0 25px;
            width: 160px;
            height: 72px;
            font-size: 14px;
            line-height: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 200;
            color: #ffffff;
          }
        }
      }
    }
  }
  .homeBanner4 {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    #s-canvas {
      width: 96px;
      height: 40px;
    }
    .swiper_boxn {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
    }
    .aubanner4title {
      .img {
        margin-top: 10%;
        width: 359px;
        height: 69px;
      }
    }
    .submit {
      width: 1200px;
      margin: 50px auto;
      .con1 {
        display: flex;
        justify-content: space-between;
        .title {
          width: 560px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          margin-bottom: 10px;
          .redStart {
            color: #ff0000;
          }
        }
        .left {
          margin-right: 60px;
        }
      }
      .con2 {
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        .title {
          width: 560px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          margin-bottom: 10px;
          .redStart {
            color: #ff0000;
          }
        }
        .setCenter {
          display: flex;
          align-items: center;
          .setBtn {
            cursor: pointer;
            font-size: 12px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            width: 96px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
            border-radius: 4px;
            margin-left: 10px;
          }
        }
        .left {
          margin-right: 60px;
        }
      }
      .con3 {
        height: 140px;
        margin-top: 30px;
        .title {
          width: 560px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          margin-bottom: 10px;
        }
        .inputStyle3 {
          height: 140px;
        }
      }
    }
    .sbmBtn {
      transition: 0.5s all;
      cursor: pointer;
      margin: 39px auto;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #909399;
      width: 600px;
      height: 40px;
      //   line-height: 40px;
      text-align: center;
      background: #f5f5f5;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      .rightarrow {
        display: block;
        width: 30px;
        height: 20px;
      }
      .rightarrow2 {
        display: none;
      }
    }
    .sbmBtn:hover {
      transition: 0.5s all;
      cursor: pointer;
      margin: 39px auto;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      width: 600px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      .rightarrow {
        display: none;
      }
      .rightarrow2 {
        display: block;
        width: 30px;
        height: 20px;
      }
    }
  }
}
</style>
